<template>
  <el-dialog
    v-loading.fullscreen="isLoading"
    v-model="modal1"
    element-loading-text="导入中..."
    title="导入句子"
    class="customdialog"
    :width="800"
	 :close-on-click-modal="false"
  >
    <el-row>
      <h2 align="center" class="mb20 f18" style='width: 100%;margin-bottom: 25px;'>请严格按照示例文件格式导入</h2>
    </el-row>
    <el-row>
      <p style="margin:5px 0 !important;color:#999;font-size:12px;">导入说明：</p>
    </el-row>
    <el-row>
      <p
        style="margin:5px 0 !important;color:#999;font-size:12px;"
      >1. 一次最多导入300条数据</p>
    </el-row>
    <el-row style="margin-top:20px;display: flex;align-items: center;">
		<UploadExcel :loadingstatus='isLoading' :onSuccess="importHander" class="mt10"></UploadExcel>
		<el-button
			type="text"
			class="mr15"
			style='margin-left: auto;'
			@click="downloadHander(template)"
		>下载示例文件</el-button>
    </el-row>
    <template #footer>
      <el-button @click="modal1 = false">关闭</el-button>
    </template>
    <el-dialog v-model="modal2" title="导入失败列表" width="600px" append-to-body :close-on-click-modal="false">
      <el-table :data="error_list">
        <el-table-column align="left" label="所在行" prop="number">
          <template #scope="scope">
            <span style="font-size: 12px">第{{scope.row.number}}行</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="错误原因" prop="detail">
          <template #scope="scope">
            <span style="font-size: 12px">{{scope.row.detail}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-dialog>
</template>
<script>
import UploadExcel from '@/components/scImportquest/upload'
import download from "downloadjs";
export default {
    name: "import",
    components: {
        UploadExcel,
        download
    },
    props: {
        courseId: {
            type: Number,
            default: '',
        },
       packageId: {
          type: Number,
          default: '',
        },
    },
    data() {
        return {
            headers: {
                Authorization: this.$TOOL.data.get("A_TOKEN")
            },
            modal1: false,
            modal2: false,
            isLoading: false,
            template: "https://777-static.oss-cn-beijing.aliyuncs.com/fkbx/%E5%AF%BC%E5%85%A5%E8%AF%BE%E7%A8%8B%E5%8F%A5%E5%AD%90%E6%A8%A1%E6%9D%BF.xlsx",
            src: "",
            error_list: []
        };
    },
    computed: {
        time() {
            return new Date().getTime();
        }
    },
    mounted() {
        
    },
    methods: {
        int() {
            this.modal1 = true;
			      this.isLoading = false
            this.src = ""
        },
        handleSuccess(res) {
            this.$notify.success("上传成功");
            this.src = res.data.path;
        },
        exports() {},
        async importHander(data) {
          this.isLoading = true
          console.log(data)
          await this._importHander(data, 0)
          if (this.error_list.length > 0) {
            this.modal1 = false;
            this.modal2 = true;
          }
        },
        async _importHander(data, gloadIndex = 0) {
            if (gloadIndex === 1) {
                this.error_list = [];
            }

            if (data.results.length > 300) {
                this.$notify.error("一次最多导入300条数据");
                return false;
            }
            
            let column = {
                句子: "word",
                译文: "translation",
                关键字: "is_keyword"
            };

            let importData = [];
            
            data.results.forEach(async (ele, index) => {
              let _data = {};
              for (let c in column) {
                  if (ele[c]) {
                      _data[column[c]] = ele[c];
                  }
              }
              importData.push(_data);
            });

            if (importData.length > 0) {
              this.$API.course.grammarVocabulary.import.post({
                 courseId: this.courseId,
                 packageId: this.packageId,
                 vocabularys: importData
              }).then((res)=> {
                if (res.data == false) {
                  this.error_list.push({
                      number: 1,
                      detail: res.message
                  });
                }
              }).finally(() => {})
            }
            if (importData.length >= data.results.length) {
                this.isLoading = false
                if (this.error_list.length > 0) {
                    this.modal1 = false;
                    this.modal2 = true;
                } else {
                    this.modal1 = false;
                    this.modal2 = false;
                    setTimeout(() => {
                        this.$emit('success')
                        this.$emit('closed')
                        this.$notify.success("导入成功");
                    }, 800);
                }
            }
        },
        downloadHander(url) {
          console.log(url)
            let x = new XMLHttpRequest();
            x.open( "GET",url , true);
            x.responseType = "blob"
            x.onload = () => {
                download(x.response, '导入课程句子模板.xlsx')
            };
            x.send();
        }
    }
};
</script>

<style scoped>
p {
  margin: 10px 0 !important;
}
</style>
